<!doctype HTML>
<html>
	<head>
		<title>LoadCSS Diagnostic Test Files</title>
		<meta charset="utf-8">
		<style>
			/* a few demo styles */
			body {
				font-family: sans-serif;
				margin: 50px auto;
				max-width: 40em;
				padding: 0 20px;
				line-height: 1.5
			}
		</style>
	</head>
	<body>
		<h1>CSS Loading Diagnostic Tests</h1>
		<p>This directory contains a variety of files that employ various CSS loading techniques.
		Most files reference a CSS file that may include a 5-second server delay to mimic latency, when tested on a node server.
		The delay makes it easier to determine if content is rendered before the CSS loads.</p>

		<p><a href="recommended.html">Recommended Pattern</a></p>


		<h2>Standard Loading Tests</h2>

		<ul>
			<li><strong><a href="control.html">Link in Head</a>:</strong> Does a link to a stylesheet from the head of the page block page rendering?</li>
			<li><strong><a href="body.html">Link in Body</a>:</strong> Does a stylesheet link in the body of the page block all page rendering, rendering of content that comes after it, or not block at all?</li>
			<li><strong><a href="import-head.html">@import in Head</a>:</strong> Does an inline @import reference from the head of the page block rendering?</li>
			<li><strong><a href="import.html">@import in Body</a>:</strong> Does an inline @import reference from the body of the page block rendering of content below it?</li>
			<li><strong><a href="dom-append.html">DOM appendChild</a>:</strong> Create a link element and append to the document.</li>
			<li><strong><a href="attributes.html">Link attributes</a>:</strong> Do browsers supporting Subresource Integrity correctly handle link attributes?</li>
		</ul>


		<h2>LoadCSS Assisted Loading</h2>

		<ul>
			<li><strong><a href="test.html">loadCSS Dynamic Load</a>:</strong> Stylesheet loaded with loadCSS() dynamically.</li>
			<li><strong><a href="test-onload.html">loadCSS Dynamic Load with onload handler</a>:</strong> Same as above with onload script handler.</li>
		</ul>

</body>
</html>
